<template>
  <el-row>
    <div class="col-3 p-0">
      <el-drawer size="650px" title="我是标题" direction="ltr" v-model="listshow" :with-header="false">
        <Questionlist v-show="listshow" v-bind="{
        questions: questionlist,
        questionbankid: index,
        routername,
        userquestion
      }"></Questionlist>
      </el-drawer>

      <el-button class="btn-11" @click.stop="listshow = !listshow">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-Menu" />
        </svg>
        &nbsp; 题单题目
      </el-button>
    </div>
    <div class="col text-right">
      <el-button class="btn-11" :disabled="des === 'T' || questionlist.length == 1" @click="
        router.push({
          name: routername,
          params: {
            index: index - 1,
          },
        })
        ">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>上一题
      </el-button>
      <span>&nbsp; {{ index + 1 }} / {{ questionlist.length }} &nbsp;</span>
      <el-button class="btn-11" @click="
        router.push({
          name: routername,
          params: {
            index: index + 1,
          },
        })
        " :disabled="des === 'F' || questionlist.length == 1">
        下一题
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </el-button>
    </div>
  </el-row>
</template>

<script setup lang="ts">
import { ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue';
import { ElDrawer } from 'element-plus';
import { onMounted, ref, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import Questionlist from "./questionlist.vue";
const p = withDefaults(defineProps<{ index: number, questionlist: Studycodemodel.Imatchquestion[], routername?: string, userquestion: Studycodemodel.Iuserquestion[] }>(), {
  index: 0,
  routername: "比赛答题",

})

const { index, questionlist, userquestion } = toRefs(p);
const des = ref<"T" | "F" | undefined>("T");
const listshow = ref(false);
const router = useRouter();

function start() {
  if (index.value == 0) {
    des.value = "T";
  } else if (index.value == questionlist.value.length - 1) {
    des.value = "F";
  } else if (index.value >= questionlist.value.length) {
    router.push({
      name: "比赛答题",
      params: {
        index: 0,
      },
    });
  } else {
    des.value = undefined;
  }
}

onMounted(() => {
  start();
});

watch(
  () => index.value,
  () => {
    start();
  }
);
</script>
